window.addEventListener('load', function () {
    function animate(obj, target, callback) {
        // 将函数当实参传递过来 则相当于执行了这么一步 callback = function(){}  调用的时候 callback()
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            //   核心算法 （目标值 - 现在的位置）/ 10
            //   把步长值改为整数  不要出现小数的问题 如果step为正数 向上取整 Math.ceil 如果step为负数 向下取整 Math.floor
            var step = (target - obj.offsetTop) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);


            if (obj.offsetTop == target) {
                // 停止动画本质是停止定时器
                clearInterval(obj.timer);
                // 如果有callback函数就调用该函数
                if (callback) {
                    callback();
                }
            }

            obj.style.top = obj.offsetTop + step + "px";
        }, 30);
    }
    var move = document.querySelector('.move');
    var mes = document.querySelector('.mes');
    var ski = document.querySelector('.ski');
    var pro = document.querySelector('.pro');
    mes.addEventListener('click', function () {
        animate(move, -610)
    })
    ski.addEventListener('click', function () {
        animate(move, -70)
    })
    pro.addEventListener('click', function () {
        animate(move, 430)
    })
})